<template>
  <div class="body">
    <el-form class="form" :model="form" v-loading="loading.loadingCount > 0">
      <!-- <el-form-item
        label="互斥机构ID"
        :label-width="fromViewCofing.label_width"
      >
        <el-input
          v-model="form.organization_ids"
          class="inp"
          :disabled="true"
        ></el-input>
      </el-form-item> -->

      <el-form-item
        :rules="[{ required: true, message: '机构不能为空' }]"
        label="互斥机构选择"
        :label-width="fromViewCofing.label_width"
      >
        <el-select
          v-model="form.organization_ids"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in options_organization"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <div class="form_footer">
        <el-button type="success" @click="fromSubmit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  apiOrganizationSelects,
  apiOrganizationMutexCreate,
  apiOrganizationMutexDetail,
} from "@/api/apiCommon";

import {
  isNullOrEmpty,
  toEscapedJsonString,
  fromEscapedJsonString,
  assignFormParams,
} from "@/utils/common";
export default {
  name: "Index",
  data() {
    return {
      init_form: {
        id: 0,
        organization_ids: "",
      },
      form: {},
      fromViewCofing: {
        input_width: "120px",
        label_width: "160px",
      },
      props: { multiple: true },
      options_organization: [],
      loading: {
        status: false,
        loadingCount: 0,
      },
    };
  },
  created() {
    var params = this.$route.query;
    if (params.id != 0) {
      this.req_details(params.id);
    }
    this.form = this.init_form;
    this.reqOrganizationSelects();
  },
  methods: {
    /**表单提交 */
    fromSubmit() {
      const _this = this;
      _this.loading_start();
      var form = this.form;
      var reqData = {};
      console.log(form, "form");
      // const str = arr.join(',');  // "1,2,3"
      reqData.id = form.id;
      reqData.organization_ids = form.organization_ids.join(",");

      // console.log(form, "formformform");
      // return;
      // reqData.business_organization = toEscapedJsonString(
      //   form.business_organization
      // );

      apiOrganizationMutexCreate(reqData)
        .then((response) => {
          if (response.code == 1) {
            _this.$message({
              message: response.msg,
              type: "success",
            });
          } else {
            _this.$message.error(response.msg);
          }
          console.log("获取上一页");
          _this.$router.go(-1);
          _this.loading_end();
        })
        .catch(function (result) {
          console.error("异常");
          console.error(result);
          _this.loading_end();
        });
    },
    // 获取详情
    req_details(id) {
      this.loading_start();
      if (!id) {
        return;
      }
      const _this = this;
      apiOrganizationMutexDetail({
        id: id,
      })
        .then((response) => {
          const result = response.data.details;
          // const organization_ids = ;
          // this.form.organization_ids = organization_ids;
          this.form.id = result.id;
          this.form.organization_ids = result.organization_ids
            .split(",")
            .map(Number);
          console.log(this.form, "= this.form");
          _this.loading_end();
        })
        .catch(function (result) {
          _this.loading_end();
        });
    },
    // 获取商务机构
    reqOrganizationSelects() {
      const _this = this;
      this.loading_start();
      apiOrganizationSelects({})
        .then((response) => {
          if (response.code == 1) {
            _this.options_organization = response.data.selects;
          } else {
            _this.$message.error(response.msg);
          }
          _this.loading_end();
        })
        .catch(function (result) {
          _this.loading_end();
        });
    },
    // 商务机构选择更新信息
    organizationbBsinessSelectHandleChange(value, label) {
      console.log(value, "value");
      var organization_ids = [];
      for (var v = 0; v < value.length; v++) {
        organization_ids.push(value[v]);
      }

      this.form.organization_ids = organization_ids.join(",");
      console.log(this.form, " this.form");
    },
    // 开始加载
    loading_start() {
      const _this = this;
      if (_this.loading.loadingCount === 0) {
        // 显示加载状态
        _this.loading.status = true;
      }
      _this.loading.loadingCount += 1;
    },
    // 停止加载
    loading_end() {
      const _this = this;
      if (_this.loading.loadingCount > 0) {
        _this.loading.loadingCount -= 1;
        if (_this.loading.loadingCount === 0) {
          _this.loading.status = false;
        }
      }
    },
  },
};
</script>

<style lang="scss"></style>
